<template>
    <view class="content">
        <!-- 视频 -->
        <!-- <view class="vframe" v-if="endTime">
        	<video id="myVideo" :src="videoUrl" controls :autoplay="autoplay" object-fit="fill" :initial-time="endTime" custom-cache="false" @timeupdate="timeupdate" ></video>
        </view> -->
        <view class="vframe">
        	<video id="myVideo" :src="videoUrl" controls :autoplay="autoplay" object-fit="fill" custom-cache="false" 
				@timeupdate="timeupdate" ></video>
        </view>
		
		<view class="box">
			<view class="title">销售话术实战秘籍系统 原来如此简单！</view>
			<view class="sub">本课程是站学习策划、研发和制作的直播课程，学习形式包括课后录播回放+专属VIP班级群</view>
		</view>
		<view class="line"></view>
		<view class="box u-flex">
			<image src="../../static/image/gift.png" class="gift-icon"></image>
			<view class="u-flex-1">
				<view class="gift-title">课程赠送三本销售工具书课程赠送三本销售工具书课程赠送三本销售工具书</view>
				<view class="gift-sub">购买课程立即赠送</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box">
			<view class="top">
				<view class="change" @click="changeSection">
					<u-icon v-if="!isSection" name="arrow-up" color="#2558ab" label="切换章节" label-color="#2558ab" label-pos="left" size="26"></u-icon>
					<u-icon v-else name="arrow-down" color="#2558ab" label="切换章节" label-color="#2558ab" label-pos="left" size="26"></u-icon>
				</view>
				<view>已更新86节/共86节</view>
			</view>
			
			<view v-if="isSection">
				<view class="chapter">一、特定场景应对话术实战模拟</view>
				<view class="item" :class="{active : index == 0}" v-for="(item, index) in 3" :key="index">
					<image src="../../static/icon/icon_1.png" class="icon-1" v-if="index == 0"></image>
					<image src="../../static/icon/icon_2.png" class="icon-1" v-else></image>
					<view class="u-flex-1">
						<view class="item-tit" :class="{tActive : index == 0}">
							01 实战课程模拟免费试看
						</view>
						<view class="time">
							<image src="../../static/icon/time.png" class="time-icon"></image>
							<view>02:36</view>
						</view>
					</view>
					<view class="btn" v-if="index == 0">整节试看</view>
				</view>
			</view>
			<view v-if="!isSection">
				<view class="chapter2" v-for="(item, index) in 3" :key="index">
					一、特定场景应对话术实战模拟
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				isSection: false,
                show: false,
                id: '',//课程id
                data: {},
                isShow: false,
                chapter: [],
                videoUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
                videoContext: '', 
                playShow: '',
                chapterId: '', //章节id
                autoplay: false,
                endTime: '',
            };
        },
        onLoad(option) {
            this.playShow = false
            this.id = option.id
            if (option.endTime) {
                this.endTime = option.endTime
                console.log('this.endTime',this.endTime)
            }
            if (option.cId) {
                this.chapterId = option.cId
            }
            if (option.vurl) {
                this.videoUrl = option.vurl
                this.autoplay = true
            }
            // this.getData()
            // this.getChapter()
            this.videoContext = uni.createVideoContext('myVideo');
        },
        methods: {
			changeSection() {
				this.isSection = !this.isSection
			},
			// uni.pageScrollTo({
			// 	scrollTop: 0, //滚动到页面的目标位置
			// 	duration: 300
			// });

            // 视频当前播放时间,5秒请求一次接口
            timeupdate(e) {
                // e.detail.currentTime为每次触发时,视频的当前播放时间 250ms
                let currentTime = Math.trunc(Number(e.detail.currentTime));
                if (currentTime > 0) {
                    if (currentTime % 5 == 0 && this.playShow == false) {
                        if (this.playShow == false) {
                            // 请求接口
                            this.playShow = true
                            console.log('1111')
                            this.$ajax('create_record', {
                                userToken: this.$getSync('userToken'),
                                course_id: this.id,//课程编号
                                chapter_id: this.chapterId,//章节编号
                                end_times: currentTime,//播放秒数
                            }).then(ret => {
                            	if (ret.status == 0) {
                                    
                            	} else {
                            		this.$toast(ret.message);
                            	}
                            });
                        }
                    } else if (currentTime % 5 != 0) {
                        this.playShow = false
                    }
                }
            },
            // 播放视频
            play(item) {
                if (this.videoId == item.id) return
                this.endTime = 0
                this.chapterId = item.id
                this.videoUrl = item.video_uri
                this.show = false
                this.autoplay = true
            },
            
            // 获取课程章节
            getChapter() {
            	this.$ajax('chapter_detail', {
                    userToken: this.$getSync('userToken'),
            		course_id: this.id,
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.chapter = ret.data
                        if (!this.chapterId) {
                            this.chapterId = ret.data[0].list[0].id
                            this.videoUrl = ret.data[0].list[0].video_uri
                            this.autoplay = true
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            // 获取课程详情
            getData() {
            	this.$ajax('course_detail', {
            		userToken: this.$getSync('userToken'),
            		course_id: this.id,
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.data = ret.data
                        this.isShow = true
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
	
    page{
        background-color: #fff;
    }
	.vframe {
		width: 100%;
		height: 420rpx;
	
		video {
			width: 100%;
			height: 100%;
		}
	}
	.box{
		background-color: #fff;
		padding: 30rpx 20rpx;
	}
	.title{
		font-size: 36rpx;
		font-weight: bold;
		white-space: pre-line;
		word-break: break-all;
	}
	.sub{
		font-size: 26rpx;
		color: #999ca7;
		white-space: pre-line;
		word-break: break-all;
		padding-top: 15rpx;
	}
	.line{
		width: 750rpx;
		height: 20rpx;
		background-color: #f4f6fa;
	}
	.gift-icon{
		width: 61rpx;
		height: 43rpx;
		margin-right: 20rpx;
	}
	.gift-title{
		font-size: 26rpx;
		font-weight: bold;
		white-space: pre-line;
		word-break: break-all;
	}
	.gift-sub{
		font-size: 24rpx;
		color: #7d7d7d;
		white-space: pre-line;
		word-break: break-all;
		padding-top: 5rpx;
	}
	
	.top{
		padding-bottom: 35rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.change{
		background-color: #eaf2ff;
		padding: 14rpx 18rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}
	.chapter{
		font-size: 30rpx;
		font-weight: bold;
		padding-bottom: 25rpx;
	}
	.chapter2{
		font-size: 30rpx;
		font-weight: bold;
		padding: 30rpx 25rpx;
		background-color: #f4f6fa;
		border-radius: 10rpx;
		margin-bottom: 15rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f4f6fa;
		padding: 25rpx;
		border-radius: 10rpx;
		margin-bottom: 15rpx;
	}
	.active{
		background-color: #ffede9;
	}
	.icon-1{
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}
	.item-tit{
		font-size: 28rpx;
		font-weight: bold;
	}
	.tActive{
		color: #f34544;
	}
	.time{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 10rpx;
		font-size: 22rpx;
		color: #8f8f8f;
	}
	.time-icon{
		width: 22rpx;
		height: 22rpx;
		margin-right: 8rpx;
	}
	.btn{
		width: 136rpx;
		height: 47rpx;
		border: 2rpx solid #f34644;
		font-size: 22rpx;
		text-align: center;
		color: #f34644;
		line-height: 47rpx;
		border-radius: 50rpx;
		margin-left: 20rpx;
	}

</style>
